<template>
  <EditableTable
    class="table"
    roundedHeader
    hide-default-footer
    :headers="tableHeaders"
    :items="propItems"
  >
    <template #item="{ item }">
      <tr>
        <td>
          <v-icon color="#79839B" class="icon pointer">mdi-minus-circle</v-icon>
        </td>
        <td>
          {{ item.type }}
        </td>
        <td>
          {{ item.name }}
        </td>
        <td v-for="header in tableHeaders.slice(3)" :key="header.value">
          <v-icon v-if="item[header.value]" class="right-icon" color="#EB9B31"
            >mdi-check-bold</v-icon
          >
          <v-icon v-else color="#79839B" class="right-icon">mdi-cancel</v-icon>
        </td>
      </tr>
    </template>
    <template #no></template>
  </EditableTable>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import EditableTable from "@/components/Project/Table/EditableTable.vue";
@Component({
  components: {
    EditableTable,
  },
  props: {
    items: {
      type: Array,
      default: () => [],
    },
  },
})
export default class UserRight extends Vue {
  // UserRight表格
  tableHeaders = [
    {
      value: "prepend",
      align: "center",
    },
    {
      text: "Type",
      value: "type",
      align: "center",
    },
    {
      text: "User Name",
      value: "name",
      align: "center",
    },
    {
      text: "All",
      value: "all",
      align: "center",
    },
    {
      text: "Project Manager",
      value: "projectManager",
      align: "center",
    },
    {
      text: "Read",
      value: "read",
      align: "center",
    },
    {
      text: "Write",
      value: "write",
      align: "center",
    },
    {
      text: "Delete",
      value: "delete",
      align: "center",
    },
    {
      text: "Print",
      value: "print",
      align: "center",
    },
    {
      text: "Export",
      value: "export",
      align: "center",
    },
    {
      text: "Chat",
      value: "chat",
      align: "center",
    },
    {
      text: "Library",
      value: "library",
      align: "center",
    },
    {
      text: "Upload",
      value: "upload",
      align: "center",
    },
    {
      text: "Delete Document",
      value: "deleteDocument",
      align: "center",
    },
  ];
  get propItems() {
    return this.$props.items;
  }
}
</script>

<style lang="scss" scoped>
@import "./UserRight.scss";
</style>
